<style scoped lang='scss'>
.wrapper {
    width: 100%;
    background: rgba(248, 249, 250, 1);
    padding-top: 50px;
    padding-bottom: 50px;
    .news-wrapper {
        display: flex;
        width: 1202px;
        margin: 0 auto;
        .catalog-group {
            width: 332px;
            background: #ffffff;
            height: 540px;
            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            .catalog-title {
                width: 100%;
                height: 56px;
                padding-left: 24px;
                line-height: 56px;
                border-bottom: 1 solid #dddfe6;
                box-sizing: border-box;
                span {
                    width: 64px;
                    height: 16px;
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(13, 26, 38, 1);
                    // line-height:16px;
                }
            }
            .bor {
                width: 332px;
                height: 1px;
                background: rgba(221, 223, 230, 1);
            }
            .catalog-content-group {
                padding: 40px;
                li {
                    margin-bottom: 34px;
                    height: 14px;
                    border-radius: 4px;
                    span {
                        width: 42px;
                        height: 14px;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        line-height: 14px;
                        color: #0d1a26;
                        &.active {
                            color: rgba(47, 84, 235, 1);
                        }
                    }
                }
            }
        }
        .list-outer-group {
            margin-left: 18px;
            margin-right: 18px;
            width: 852px;
            .pagination {
                text-align: right;
                padding-top: 20px;
            }
            .list-inner-group {
                li {
                    background: #ffffff;
                    margin-bottom: 20px;
                    padding: 30px 40px 30px 30px;
                    display: flex;
                    .thumbnail-group {
                        background: #e2e2e2;
                        width: 200px;
                        height: 200px;
                        margin-right: 40px;
                    }
                    .news-group {
                        flex: 1;
                        width: 200px;
                        .title {
                            height: 24px;
                            font-size: 24px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: rgba(13, 26, 38, 1);
                            line-height: 24px;
                            margin-bottom: 18px;
                        }
                        .author {
                            height: 14px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(49, 70, 90, 1);
                            line-height: 14px;
                            margin-bottom: 20px;
                            border: none;
                        }
                        .desc {
                            width: 542px;
                            height: 96px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(13, 26, 38, 1);
                            line-height: 24px;
                            margin-bottom: 14px;
                        }
                        .read-number {
                            text-align: right;
                            height: 14px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(49, 70, 90, 1);
                            line-height: 13px;
                        }
                    }
                }
            }
        }
    }
}
</style>

<template>
    <div class="wrapper">
        <div class="news-wrapper">
            <div class="catalog-group">
                <div class="catalog-title">
                    <span>场景目录</span>
                </div>
                <div class="bor"></div>
                <div class="catalog-content-group">
                    <ul class="catalog-content-list">
                        <li>
                            <span class="active">类目一</span>
                        </li>
                        <li>
                            <span>类目二</span>
                        </li>
                        <li>
                            <span>类目三</span>
                        </li>
                        <li>
                            <span>类目四</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list-outer-group">
                <ul class="list-inner-group">
                    <li>
                        <router-link to="/newsdetail">
                            <div class="thumbnail-group">
                                <img src="" alt="">
                            </div>
                        </router-link>
                        <div class="news-group">
                            <p class="title">守望科技成为猪八戒网助力企业</p>
                            <p class="author">作者</p>
                            <p class="desc">类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍
                            </p>
                            <p class="read-number">2342阅读</p>
                        </div>
                    </li>
                    <li>
                        <div class="thumbnail-group">

                            <img src="" alt="">
                        </div>
                        <div class="news-group">
                            <p class="title">守望科技成为猪八戒网助力企业</p>
                            <p class="author">作者</p>
                            <p class="desc">类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍
                            </p>
                            <p class="read-number">2342阅读</p>
                        </div>
                    </li>
                    <li>
                        <div class="thumbnail-group">
                            <img src="" alt="">
                        </div>
                        <div class="news-group">
                            <p class="title">守望科技成为猪八戒网助力企业</p>
                            <p class="author">作者</p>
                            <p class="desc">类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍
                            </p>
                            <p class="read-number">2342阅读</p>
                        </div>
                    </li>
                    <li>
                        <div class="thumbnail-group">
                            <img src="" alt="">
                        </div>
                        <div class="news-group">
                            <p class="title">守望科技成为猪八戒网助力企业</p>
                            <p class="author">作者</p>
                            <p class="desc">类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍类目介绍文字介绍
                            </p>
                            <p class="read-number">2342阅读</p>
                        </div>
                    </li>
                </ul>
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="4" :current-page="page" class="pagination" @current-change="onCurrentChange">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import { Pagination } from "element-ui"
export default {
    name: "Index",
    data() {
        return {
            page: 1,
            total: 10
        }
    },
    components: {
        [Pagination.name]: Pagination
    },
    methods: {
        onCurrentChange() {

        }
    }
}
</script>

